<template>
  <div>
    <!-- <div>子组件 -- {{ username }}</div> -->
    <div>子组件 -- {{ modelValue }} -- {{ count }}</div>
    <button @click="setUsername">+++++++</button>
    <button @click="setCount">修改count</button>
    <hr />
    <input type="number" v-model.number="num" />
  </div>
</template>

<script>
export default {
  props: ['modelValue', 'count', 'countModifiers'],
  // 定义自定义事件名称 可选
  emits: ['update:modelValue'],
  methods: {
    setUsername() {
      // this.$emit('setUsername', Date.now() + '')
      this.$emit('update:modelValue', Date.now() + '')
    },
    setCount() {
      if (this.countModifiers.time) {
        this.$emit('update:count', Date.now())
      } else {
        this.$emit('update:count', Math.random())
      }
    }
  },
  // 在使用v-model来进行自定义组件绑定时，此技巧一定要知道 重要重要重要
  computed: {
    num: {
      get() {
        return this.count
      },
      set(v) {
        this.$emit('update:count', v)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
